<template>
  <div class="home">
    <div class="nav">
      
      <van-tabs  v-model="active" to="recommend">
        <van-tab :key="i" v-for="(item,i) in arr" :title=item.title :to="item.link">
        </van-tab>
      </van-tabs>
    </div>
    <transition name="van-slide-right">

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <router-view/>
  </van-pull-refresh>
    </transition>
  </div>
</template>

<script>
 
import axios from "axios";
import VueAxios from "vue-axios";
import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);
export default {
 
  
  name: "HomeView",
  data() {
    return {
      activeName: "a",
      title:[],
      recommendList: [],
      isLoading: false,
      recommendBanner: [
    
      ],
      arr: [],
      page:3,
      active:1,
    };
  },
  methods:{
    getRecommended(page){
      // https://apis.netstart.cn/xpc/home/recommend
      axios({
        url:"https://apis.netstart.cn/xpc/home/recommend",
        method:"get",
       params:{
         page,
       } 
      }).then((res) => {
   
        if (res.status == 200) {
          this.recommendBanner = res.data.data.children[0].children;
          this.recommendList = res.data.data.children;
          this.recommendList = this.recommendList.slice(1);
          this.isLoading = false
        }
          
          
      });
    },
    toVideo(id){
      this.$router.push({
        path: "/Video",
        query: {id: id},
      });
    },
    onRefresh() {
      setTimeout(() => {
        this.getRecommended();
        this.isLoading = false;
      }, 1000);
    },
 
    
  },
  mounted() {
    axios({
      method: "get",
      url: "https://apis.netstart.cn/xpc/home/config",
      responseType: "stream",
    }).then((res) => {
     
      if (res.status== 200) {
        this.arr=res.data.data.tab
        this.arr.splice(1,1)
        this.arr.forEach((item,i)=>{
          this.title.push(item.title)
        })
       
      }
    });
    this.getRecommended(this.page)
    
  },

};

</script>
<style lang="scss" scoped>

.recommend-list {
  width: 730px;
  padding: 10px;
  margin-top: 15px;
  padding-bottom: 60px;
  ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 45vw;
      height: 45vw;
      background-color: #fff;
      display: flex;
      border-radius: 15px;
      margin-left: 5px;
      margin-bottom: 20px;
      img {
        width: 45vw;
        height: 26.57vw;
      }
      h4 {
        color: #000;
        margin-bottom: 10px;
        font-size: 26px;
      }
      span {
        color: #999999;
        font-size: 16px;
      }
    }
  }
}
</style>
<style lang="scss">
.nav {
  .van-tabs {
    height: 11vw;

    .van-tabs__wrap {
      height: 9vw;
    }
  }
}
.van-tab {
  width: 165px;
  height: 64px;
  span {
    width: 165px;
    height: 63px;
    display: inline-block;
    text-align: center;
    line-height: 63px;
    font-size: 22px;
  }
}

.van-tabs__line {
  width: 100px;
  bottom: 20px;
  border: 1px solid #2c2c2c;
}
.banner {
  width: 94.686vw;
  height: 51vw;
  border-radius: 20px;
  margin-left: 10px;
  overflow: hidden;
  img {
    width: 94.686vw;
    height: 51vw;
    // border-radius: 20px;
  }
  .van-swipe__indicator {
    width: 14px;
    height: 14px;
  }
}
</style>